/** @format */

import React, {Component} from 'react';

import styles from '../Styles/main';

import {
  Text,
  View,
  Image,
  ListView,
  ActivityIndicator,
  TouchableHighlight,
} from 'react-native';

class MovieDetail extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props.movie);
    this.state = {
      movieDetail: '',
      loaded: false
    }

    const REQUEST_URL=`https://api.douban.com/v2/movie/subject/${this.props.movie.id}`
    this.fetchData(REQUEST_URL);
  }

  fetchData(REQUEST_URL) {
    fetch(REQUEST_URL)
      .then(response => response.json())
      .then(responseData => {
        //console.log(responseData);
        this.setState({
          movieDetail: responseData,
          loaded: true,
        });
      })
      .done();
  }

  render() {
    if (!this.state.loaded) {
      return (
        <View style={styles.container}>
        <View style={styles.loading}>
          <ActivityIndicator size="large" />
        </View>
        </View>
      )
    }

    let movie = this.state.movieDetail;
    let summary = movie.summary.split(/\n/).map(p => {
      return (
        <View style={{marginBottom:15, PaddingLeft: 6, PaddingRight: 6}}>
          <Text>{p}</Text>
        </View>
      )
    });

    return (
      <View style={[styles.container, {paddingTop: 70}]}>
        <View style={[styles.item, {flexDirection: 'column'}]}>
          {summary}
        </View>
      </View>
    )
  }
}

export { MovieDetail as default}
